<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui" lang="en">

<h:head>
	<meta charset="utf-8"></meta>
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
	<meta name="description" content=""></meta>
	<meta name="author" content=""></meta>

	<!-- Le styles -->
	<link href="${facesContext.externalContext.requestContextPath}/resources/css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<style type="text/css">
html, body {
	height:100%;
}
body {
	background-color:#6A94D4;
    text-align:center; /* Centralizar na horizontal no IE caso o site entre em Quirks mode */
}
#distance {
    width:1px;
    height:50%;
    background-color:#fc6;
    margin-bottom: -150px;
/*    margin-bottom:-13.75em;  Metade da altura do nosso box que ficará centralizado */
    float:left;
}
#container {
	margin:0 auto;
    position:relative; /* Coloca o container frente ao elemento com o id distance */
    height:200px;
    width:300px;
/*    height:27.5em;
    width:45em;*/
    clear:left;
/*    background-color:gray;
    border:1px solid;*/
}
</style>
</h:head>

<h:body>			
	<div id="distance"></div>
	<div id="container">
		<h:form styleClass="form-actions">
			<h:messages></h:messages>
				
				<h:outputLabel for="usuario" value="Usuário:"></h:outputLabel>
				<h:inputText id="usuario" value="#{credentials.username}"></h:inputText>
	
				<h:outputLabel for="senha" value="Senha:"></h:outputLabel>
				<h:inputSecret id="senha" value="#{credentials.password}"></h:inputSecret>
	
				<br />
								<br />
				<h:commandButton id="login" value="LOGIN" action="#{identity.login}" 
					styleClass="btn btn-inverse" rendered="#{not identity.loggedIn}"/>
				<h:commandButton id="logout" value="LOGOUT" action="#{identity.logout}" 
					styleClass="btn btn-inverse" rendered="#{identity.loggedIn}"/>
		</h:form>
	</div>
</h:body>
</html>